<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- Cookie -->
    <form>
        <label>用户名</label>
        <input type="username">
        <br>
        <label>密码</label>
        <input type="password">
        <br>
        <input type="checkbox" id="rememberMe">
        <label for="rememberMe">记住我</label>
        <br>
        <input type="submit" value="登录">
        <br><br><br>
    </form>
    <script>
        const username = document.querySelector('input[type="username"]');
        const checkbox = document.querySelector('input[type="checkbox"]');
        const submit = document.querySelector('input[type="submit"]');

        const arr = document.cookie
            .split('; ') //cookie是字符串, 把他转换成数组, 分号后面有空格
            .map(cookie => cookie.split('=')); // 把字符串再进行拆分, 分割元素

        let cookie = {}; // 把数组转换为对象方便数据的提取
        for(let i = 0; i < arr.length; i++) {
            let name = arr[i][0];
            let value = arr[i][1];
            cookie[name] = decodeURIComponent(value); //解码
        }

        // 如果有cookie时, 用户名显示cookie保存的值
        if (document.cookie) {
            username.value = cookie.yourname;
            checkbox.checked = true;
        }

        console.log(cookie);

        submit.addEventListener('click', e => {
            if (checkbox.checked && username.value != '') {
                // cookie是名值对存储 (name=value), 不同名存储不同的cookie
                // let key = 'username';
                let key = 'yourname';
                let value = encodeURIComponent(username.value); // 可能会造成混乱, 需要URI编码
                // cookie具有有效期, 单位秒 (max-age)
                let twoDays = 2 * 24 * 60 * 60;


                document.cookie = `${key}=${value}; max-age=${twoDays}`;
            }
            e.preventDefault();
        })
    </script>


    <!-- LocalStorage -->
    <input type="text">
    <section><ul class="history"></ul></section>
    <button>搜索</button>
    <script>
        const input = document.querySelector('input[type="text"]');
        const history = document.querySelector('.history');
        const btn = document.querySelector('button');

        if (localStorage.length > 0) {
            for (let i = 0; i < localStorage.length; i++) {
                let key = localStorage.key(i);
                history.innerHTML += `<li>${localStorage.getItem(key)}</li>`
            }
        }

        btn.addEventListener('click', () => {
            if (input.value) {
                let key = new Date().valueOf(); // 区分每一次的输入
                let value = input.value;
                localStorage.setItem(key, value);
                input.value = ''; // 完成搜索后清空

                history.innerHTML += `<li>${localStorage.getItem(key)}</li>`
            }
        })
    </script>

</body>

</html>